<template>
  <SubLayout @refresh="refresh" :showRefresh="true">
    <template #default>
      <div>
        <h4 class="divider">基本信息</h4>
        <ul class="base-list">
          <li>
            <div class="li-inner">
              <p>
                <span> 事件名称：</span>
                {{ baseDetail.evtName }}
              </p>
            </div>
          </li>
          <li>
            <div class="li-inner">
              <p>
                <span> 所属应用：</span> {{ appList.get(baseDetail.appId) }}
              </p>
            </div>
          </li>
          <li>
            <div class="li-inner">
              <p>
                <span> 消费者总数限制：</span>
                {{ baseDetail.subscriberCnt }}
              </p>
            </div>
          </li>
          <li>
            <div class="li-inner">
              <p>
                <span>事件主题：</span>
                {{ baseDetail.topicName }}
              </p>
            </div>
          </li>
          <li>
            <div class="li-inner">
              <p><span> 事件频率：</span> {{ baseDetail.rate }}/秒</p>
            </div>
          </li>
          <li>
            <div class="li-inner">
              <p>
                <span> 失败保留天数：</span> {{ baseDetail.failValidDays }} 天
              </p>
            </div>
          </li>
          <li>
            <div class="li-inner">
              <p>
                <span> 服务转事件：</span>
                {{ baseDetail.svcToEvt == 1 ? "是" : "否" }}
              </p>
            </div>
          </li>
          <li>
            <div class="li-inner">
              <p>
                <span> 选择服务：</span> {{ serviceList.get(baseDetail.svcId) }}
              </p>
            </div>
          </li>
          <li>
            <div class="li-inner">
              <p><span> 事件定时：</span> {{ baseDetail.cron }}</p>
            </div>
          </li>
          <li>
            <div class="li-inner">
              <p><span> 备注说明：</span> {{ baseDetail.memo }}</p>
            </div>
          </li>
        </ul>
        <h4 class="divider">已订阅应用</h4>
        <el-table :data="subscriptionList" style="width: 100%">
          <el-table-column prop="appName" label="应用名称" />
          <el-table-column prop="orgName" label="部门名称" />
          <el-table-column prop="provider" label="服务商" />
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="getSubscriptionList"
          v-if="total > 10"
        />
        <h4 class="divider">参数校验</h4>
        <PamarsCheck
          v-model="baseDetail.resEvtInParamsList"
          type="detail"
        ></PamarsCheck>
      </div>
    </template>
  </SubLayout>
</template>

<script setup>
import { ArrowRightBold } from "@element-plus/icons-vue";
import { onMounted, reactive, toRefs, ref } from "vue";
import { getEventDetail, getEvtPerms } from "@/api/event";
import { getAppPageList } from "@/api/application";
import { useRoute, useRouter } from "vue-router";
import PamarsCheck from "./components/PamarsCheck.vue";
import SubLayout from "@/components/SubLayout";
import { ElLoading } from "element-plus";
import { getServieList } from "@/api/service.js";
const route = useRoute();
const router = useRouter();
const id = route.query.id;
const state = reactive({
  baseDetail: {},
  appList: new Map(),
  serviceList: new Map(),
  subscriptionList: [],
  total: 0,
});
const { baseDetail, appList, subscriptionList, total, serviceList } =
  toRefs(state);
const getDetail = async (id) => {
  let { data } = await getEventDetail(id);
  state.baseDetail = data;
};

// 应用列表
const getApplist = async () => {
  let { data } = await getAppPageList({ current: 1, size: 999 });
  data.list.forEach((it) => {
    state.appList.set(it.id, it.appName);
  });
  console.log(state.appList);
};

// 已上线服务类别
const getServieApiList = async () => {
  let { data } = await getServieList({ current: 1, size: 999, onlineSts: "A" });
  data.list.forEach((it) => {
    state.serviceList.set(it.svcId, it.svcName);
  });
};

// 已订阅应用
const getSubscriptionList = async (current = 1) => {
  let params = {
    evtId: id,
    current,
    size: 10,
  };
  let { data } = await getEvtPerms(params);
  state.subscriptionList = data.list;
  state.total = data.total;
};

const refresh = () => {
  getDetail(id);
  getApplist();
  getServieApiList();
  getSubscriptionList();
};
onMounted(() => {
  refresh();
});
</script>

<style lang="scss" scoped>
ul.base-list {
  overflow: hidden;

  li {
    width: 33.33%;
    display: inline-block;
    line-height: 30px;
    margin-bottom: 10px;
    padding: 0 10px;

    .li-inner {
      padding: 0 5px;
    }

    &.w100 {
      width: 100%;
    }

    p {
      min-height: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #3c475d;
    }

    span {
      font-weight: bolder;
    }
  }
}

.desc {
  padding: 10px 0;
}

.export-api {
  border-top: solid 1px #ebeef5;
  padding: 10px 0;
  margin-top: 65px;
}
</style>
